&lt;
<script setup lang="ts">
import { useRequest } from '@/hooks';
import { get } from '@/utils/request';

// 基础请求示例
const {
    data: basicData,
    loading: basicLoading,
    error: basicError,
    run: basicRun,
    cancel: basicCancel,
    refresh: basicRefresh,
} = useRequest(() => get('/api/test'), {
    manual: true,
    onSuccess: (data) => {
        console.log('Basic request success:', data);
    },
    onError: (error) => {
        console.error('Basic request error:', error);
    },
});

// 轮询请求示例
const {
    data: pollingData,
    loading: pollingLoading,
    error: pollingError,
    run: startPolling,
    cancel: stopPolling,
} = useRequest(() => get('/api/polling'), {
    manual: true,
    pollingInterval: 3000, // 每3秒轮询一次
    onSuccess: (data) => {
        console.log('Polling request success:', data);
    },
    onError: (error) => {
        console.error('Polling request error:', error);
    },
});

// 自动请求示例
const {
    data: autoData,
    loading: autoLoading,
    error: autoError,
    refresh: autoRefresh,
    reset: autoReset,
} = useRequest(() => get('/api/auto'), {
    manual: false, // 自动发送请求
    defaultParams: [], // 可以设置默认参数
    onSuccess: (data) => {
        console.log('Auto request success:', data);
    },
    onError: (error) => {
        console.error('Auto request error:', error);
    },
});
</script>

<template>
    <div class="request-demo">
        <h1>Request Demo</h1>

        <!-- 基础请求示例 -->
        <section class="demo-section">
            <h2>Basic Request</h2>
            <div class="status">
                <p>Loading: {{ basicLoading }}</p>
                <p>Data: {{ basicData }}</p>
                <p v-if="basicError">Error: {{ basicError.message }}</p>
            </div>
            <div class="actions">
                <button @click="basicRun">Send Request</button>
                <button @click="basicCancel">Cancel</button>
                <button @click="basicRefresh">Refresh</button>
            </div>
        </section>

        <!-- 轮询请求示例 -->
        <section class="demo-section">
            <h2>Polling Request</h2>
            <div class="status">
                <p>Loading: {{ pollingLoading }}</p>
                <p>Data: {{ pollingData }}</p>
                <p v-if="pollingError">Error: {{ pollingError.message }}</p>
            </div>
            <div class="actions">
                <button @click="startPolling">Start Polling</button>
                <button @click="stopPolling">Stop Polling</button>
            </div>
        </section>

        <!-- 自动请求示例 -->
        <section class="demo-section">
            <h2>Auto Request</h2>
            <div class="status">
                <p>Loading: {{ autoLoading }}</p>
                <p>Data: {{ autoData }}</p>
                <p v-if="autoError">Error: {{ autoError.message }}</p>
            </div>
            <div class="actions">
                <button @click="autoRefresh">Refresh</button>
                <button @click="autoReset">Reset</button>
            </div>
        </section>
    </div>
</template>

<style scoped lang="scss">
.request-demo {
    padding: 20px;

    h1 {
        margin-bottom: 30px;
        color: #333;
    }

    .demo-section {
        margin-bottom: 30px;
        padding: 20px;
        border: 1px solid #eee;
        border-radius: 8px;

        h2 {
            margin-bottom: 15px;
            color: #666;
        }

        .status {
            margin-bottom: 15px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;

            p {
                margin: 5px 0;
                color: #666;
            }
        }

        .actions {
            display: flex;
            gap: 10px;

            button {
                padding: 8px 16px;
                border: none;
                border-radius: 4px;
                background-color: #4CAF50;
                color: white;
                cursor: pointer;
                transition: background-color 0.3s;

                &:hover {
                    background-color: #45a049;
                }

                &:active {
                    background-color: #3d8b40;
                }
            }
        }
    }
}
</style>
